<template>
  <div class="page">
    <!-- <Close @click="handleClose"></Close> -->
    <Card title="报警次数">
      <PieVue ref="pieChart"> </PieVue>
    </Card>
    <Table
      ref="yhtable"
      title="超时未处理报警"
      :headers="['报警点位', '报警参数', '报警时间']"
      :propsData="['monitorName', 'monitorParam', 'monitorStartTime']"
      minHeight="200"
      height="200"
    ></Table>
    <!-- <Table
      ref="yhtable"
      title="重大危险源实时数据"
      :headers="['温度', '湿度', '罐体名称']"
      :propsData="['hiddenLevel', 'hiddenInfo', 'rectificationUserName']"
    ></Table> -->
    <Card title="重大危险源数据">
      <div class="select">
        <div class="selected">
          <div class="title">{{ selectedWxy.deviceName }}</div>
          <div @click="clickSelect" class="icon">
            <img src="../assets/selected.svg" alt="" />
          </div>
          <div
            @click="handleHis(selectedWxy.temperatureNum)"
            v-if="selectedWxy.temperatureNum"
            class="button"
          >
            温度: {{ selectedWxy.temperature }}
          </div>
          <div
            @click="handleHis(selectedWxy.liquidNum)"
            v-if="selectedWxy.liquidNum"
            class="button"
          >
            液位: {{ selectedWxy.liquid }}
          </div>
        </div>
        <div v-if="showList" class="select-list">
          <div
            @click="clickNode(item)"
            v-for="item in selectList"
            class="list-item"
          >
            {{ item.deviceName }}
          </div>
        </div>
      </div>

      <LineChart ref="hisLine"></LineChart>
    </Card>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Close from "../components/close.vue";
import AlarmNum from "../components/AlarmNum.vue";
import Echarts from "../components/Echarts.vue";
import CcgTable from "../components/ccgTable.vue";
import BorderCard from "../components/borderCard.vue";
import { bjcs, dangerBj, zdwxy, history } from "@/api/threeD.js";
import Table from "../components/table.vue";
import Card from "../components/Card.vue";
import PieVue from "../echarts/pie.vue";
import LineChart from "../echarts/line.vue";
export default defineComponent({
  name: "LeftMenu",
  components: {
    AlarmNum,
    CcgTable,
    Close,
    BorderCard,
    Echarts,
    Table,
    Card,
    PieVue,
    LineChart,
  },

  data() {
    return {
      marginBottom: 30,
      marginTop: 30,
      showList: false,
      selectList: [],
      selectedWxy: {},
    };
  },
  methods: {
    handleClose() {},
    clickSelect() {
      this.showList = !this.showList;
    },
    clickNode(item) {
      this.selectedWxy = item;
      this.handleHis(
        this.selectedWxy.liquidNum || this.selectedWxy.temperatureNum
      );
      this.showList = false;
    },
    formatDate(time) {
      if (time) {
        const date = new Date(time);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const h = date.getHours();
        const m = date.getMinutes();
        const s = date.getSeconds();

        return `${year}-${this.padZero(month)}-${this.padZero(
          day
        )} ${this.padZero(h)}:${this.padZero(m)}:${this.padZero(s)} `;
      } else {
        return null;
      }
    },
    //补零函数
    padZero(n) {
      return n < 10 ? "0" + n : n;
    },
    async handleHis(bitNumber) {
      if (bitNumber) {
        const dateNow = Date.now();
        const hisForm = {};
        hisForm.start = this.formatDate(dateNow - 3600 * 1000);
        hisForm.end = this.formatDate(dateNow);
        hisForm.databaseName = bitNumber;
        history({
          ...hisForm,
        }).then((res) => {
          let list = res.data;
          this.$refs.hisLine.setData({
            data: {
              name: "",
              type: "line",
              data: list.map((item) => {
                return item.dataValue;
              }),
              sommth: true,
            },
            yAxis: list.map((item) => {
              return item.createTime;
            }),
            title: "历史数据",
          });
        });
      }
    },
  },
  mounted() {
    dangerBj().then((res) => {
      let total = 0;
      res.data.forEach((item) => (total += item.total));
      this.$refs.pieChart.setData({
        total,
        data: res.data.map((item) => ({
          name: item.monitor_type,
          value: item.total,
        })),
        center: "报警总次数",
        color: ["#27CBFF", "#FF5F55", "#FF8C21", "#FFCB41"],
      });
    });
    bjcs().then((res) => {
      this.$refs.yhtable.setData(res.data);
    });
    zdwxy().then((res) => {
      this.selectList = res.rows;
      this.selectedWxy = res.rows[0];
      this.handleHis(
        this.selectedWxy.liquidNum || this.selectedWxy.temperatureNum
      );
    });
  },
});
</script>

<style lang="scss" scoped>
.left-menu {
  position: relative;
  width: 360px;
  height: 934px;
  color: #fff;

  &-close {
    position: absolute;
    top: 13px;
    right: 7px;
    z-index: 9;
    transform: rotate(-17deg);
    cursor: pointer;
  }
}

.page {
  width: 418px;
  height: 934px;
  padding-top: 15px;
  background-image: url("../assets/pagebg.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backdrop-filter: blur(10px);
  background-position: center center;
  overflow: hidden;
  color: #fff;
}

.select {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  .select-list {
    position: absolute;
    // display: none;
    z-index: 999;
    max-height: 100px;
    overflow: auto;
    cursor: pointer;
    top: 25px;
    left: 30px;
    color: #fff;
    text-align: right;

    .list-item {
      &:hover {
        color: #31effb;
        text-align: right;
      }
    }
  }
  .selected {
    color: #31effb;
    display: flex;
    height: 30px;
    img {
      width: 15px;
    }
    .title {
      padding-top: 4px;
    }
    .icon {
      padding-top: 4px;

      width: 30px;
      text-align: center;
      line-height: 21px;
      cursor: pointer;
    }

    .button {
      border: 0.830211px solid #57d7ff;
      border-radius: 4px;
      padding: 3px 5px;
      margin-left: 5px;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
</style>
